Priori Dev

Appearance

Getting Started with V-Lite ​

What You Have ​

V-Lite is a minimal VitePress documentation site. VitePress converts your Markdown files into a fast, beautiful static website powered by Vue 3 and Vite.

Basic Workflow ​

1. Start Development Server ​

bash
npx vitepress dev docs
  • Opens at http://localhost:5173 (usually)
  • Changes appear instantly (<100ms) without refreshing
  • Hot reload as you edit files

2. Create/Edit Content ​

Write in Markdown files inside the docs/ folder:

  • Edit docs/index.md for the homepage
  • Add new pages: create docs/about.md, docs/guide.md, etc.
  • All Markdown files automatically become pages

3. Build for Production ​

bash
npx vitepress build docs
  • Generates static HTML in docs/.vitepress/dist/
  • Ready to deploy anywhere (GitHub Pages, Netlify, Vercel, etc.)

4. Preview Production Build ​

bash
npx vitepress preview docs
  • Test the built site locally before deploying

Adding Your First Page ​

Create a new page:

  1. Create a new file: docs/about.md
  2. Add content:
    markdown
    # About

This is my about page.
  3. Visit http://localhost:5173/about in your browser
  4. The page appears instantly!

Adding Navigation ​

To add a navbar and sidebar, create a configuration file:

Create docs/.vitepress/config.js:

js
export default {
  title: 'V-Lite',
  description: 'A VitePress documentation site',

  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Getting Started', link: '/getting-started' },
      { text: 'About', link: '/about' }
    ],

    sidebar: [
      {
        text: 'Guide',
        items: [
          { text: 'Getting Started', link: '/getting-started' },
          { text: 'Configuration', link: '/configuration' }
        ]
      }
    ]
  }
}

Customizing Your Site ​

You can customize:

  • Site title and description
  • Navigation bar and sidebar
  • Theme colors
  • Social links (GitHub, Twitter, etc.)
  • Search functionality
  • Footer content

All through the config.js file.

The VitePress Magic ​

  • First visit: Loads pre-rendered HTML (fast, SEO-friendly)
  • After that: Works like a single-page app (no full page reloads)
  • You just write Markdown, VitePress handles the rest

Next Steps ​

  1. Edit docs/index.md to customize your homepage
  2. Create new .md files for additional pages
  3. Add a config.js file to set up navigation
  4. Customize the theme to match your style

Learn More ​

lock

Enter PIN to continue